{% extends "profile/base.html" %}

{% block title %}500 - 服务器内部错误{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        text-align: center;
        padding: 80px 20px;
    }
    
    .error-code {
        font-size: 120px;
        font-weight: bold;
        color: #dc3545;
        line-height: 1;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    
    .error-message {
        font-size: 24px;
        margin-bottom: 30px;
        color: #495057;
    }
    
    .error-description {
        font-size: 16px;
        color: #6c757d;
        margin-bottom: 40px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .error-actions {
        margin-top: 40px;
    }
    
    .error-icon {
        font-size: 64px;
        color: #dc3545;
        margin-bottom: 20px;
    }
    
    .error-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 40px;
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    
    .error-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #dc3545, #c82333);
    }
    
    .error-illustration {
        margin-bottom: 30px;
    }
    
    .btn-home {
        background: linear-gradient(45deg, #4361ee, #3f37c9);
        border: none;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 50px;
        transition: all 0.3s;
    }
    
    .btn-home:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(67, 97, 238, 0.3);
    }
    
    .btn-retry {
        background-color: #f8f9fa;
        color: #495057;
        border: 1px solid #dee2e6;
        padding: 12px 30px;
        font-weight: 500;
        border-radius: 50px;
        transition: all 0.3s;
    }
    
    .btn-retry:hover {
        background-color: #e9ecef;
        transform: translateY(-2px);
    }
    
    .error-details {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
        text-align: left;
        border-left: 4px solid #dc3545;
    }
    
    .error-id {
        font-family: monospace;
        font-size: 14px;
        color: #6c757d;
    }
    
    .contact-info {
        margin-top: 30px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    @media (max-width: 768px) {
        .error-code {
            font-size: 80px;
        }
        
        .error-message {
            font-size: 20px;
        }
        
        .error-card {
            padding: 30px 20px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="error-container">
    <div class="error-card">
        <div class="error-illustration">
            <i class="fas fa-exclamation-triangle error-icon"></i>
        </div>
        
        <div class="error-code">500</div>
        <h1 class="error-message">服务器内部错误</h1>
        <p class="error-description">
            抱歉，服务器遇到了一个意外错误，无法完成您的请求。我们的技术团队已经收到通知，正在努力修复此问题。
        </p>
        
        {% if error_id %}
        <div class="error-details">
            <p><strong>错误ID:</strong> <span class="error-id">{{ error_id }}</span></p>
            <p class="mb-0">如果您需要联系技术支持，请提供上述错误ID，以便我们更快地定位问题。</p>
        </div>
        {% endif %}
        
        <div class="error-actions">
            <a href="{{ url_for('profile.dashboard') }}" class="btn btn-primary btn-home me-2">
                <i class="fas fa-home me-2"></i>返回首页
            </a>
            <button onclick="location.reload()" class="btn btn-light btn-retry">
                <i class="fas fa-redo me-2"></i>重试
            </button>
        </div>
        
        <div class="contact-info">
            <h5>需要帮助？</h5>
            <p class="mb-2">如果问题持续存在，您可以通过以下方式联系我们：</p>
            <div class="row">
                <div class="col-md-4 mb-3">
                    <i class="fas fa-envelope fa-2x text-primary mb-2"></i>
                    <p class="mb-0">发送邮件</p>
                    <small>support@example.com</small>
                </div>
                <div class="col-md-4 mb-3">
                    <i class="fas fa-phone fa-2x text-success mb-2"></i>
                    <p class="mb-0">电话支持</p>
                    <small>400-123-4567</small>
                </div>
                <div class="col-md-4 mb-3">
                    <i class="fas fa-comments fa-2x text-info mb-2"></i>
                    <p class="mb-0">在线客服</p>
                    <small>工作日 9:00-18:00</small>
                </div>
            </div>
        </div>
        
        <div class="mt-5">
            <h5>您可以尝试：</h5>
            <div class="row mt-3">
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-history fa-3x text-warning mb-3"></i>
                            <h6 class="card-title">稍后再试</h6>
                            <p class="small text-muted">可能是临时问题，稍等片刻再试</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-compass fa-3x text-primary mb-3"></i>
                            <h6 class="card-title">浏览其他页面</h6>
                            <a href="{{ url_for('profile.dashboard') }}" class="btn btn-sm btn-outline-primary">首页</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-bug fa-3x text-danger mb-3"></i>
                            <h6 class="card-title">报告问题</h6>
                            <button class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#reportModal">报告</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 报告问题模态框 -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reportModalLabel">报告问题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="errorReportForm">
                    <div class="mb-3">
                        <label for="userEmail" class="form-label">您的邮箱</label>
                        <input type="email" class="form-control" id="userEmail" placeholder="your@email.com">
                    </div>
                    <div class="mb-3">
                        <label for="errorDescription" class="form-label">问题描述</label>
                        <textarea class="form-control" id="errorDescription" rows="4" placeholder="请描述您遇到的问题..."></textarea>
                    </div>
                    {% if error_id %}
                    <input type="hidden" id="errorId" value="{{ error_id }}">
                    {% endif %}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitErrorReport">提交报告</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 提交错误报告
        document.getElementById('submitErrorReport').addEventListener('click', function() {
            const email = document.getElementById('userEmail').value;
            const description = document.getElementById('errorDescription').value;
            const errorId = document.getElementById('errorId') ? document.getElementById('errorId').value : '';
            
            if (!description.trim()) {
                alert('请描述您遇到的问题');
                return;
            }
            
            // 这里可以添加AJAX提交逻辑
            // 简化示例，仅显示成功消息
            const modal = bootstrap.Modal.getInstance(document.getElementById('reportModal'));
            modal.hide();
            
            // 显示成功消息
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show';
            alertDiv.innerHTML = `
                感谢您的反馈！我们已收到您的问题报告，将尽快处理。
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            
            document.querySelector('.error-container').prepend(alertDiv);
            
            // 重置表单
            document.getElementById('errorReportForm').reset();
        });
    });
</script>
{% endblock %}